<template>
  <div class="index">
    <!-- logos -->
    <div class="index_title">
      <div class="index_title_img"></div>
      <!-- <img src="../../assets/images/logo.png" alt  /> -->
    </div>
    <!-- logoe -->
    <!-- tabs -->
    <div class="index_tab">
      <div class="index_tab_box">
        <div class="index_tab_box_btn index_tab_box_btnActive">防伪查询</div>
        <!-- <div class="index_tab_box_btn">窜货监管</div>
        <div class="index_tab_box_btn">产品查询</div>-->
      </div>
    </div>
    <!-- tabe -->
    <!-- 头部背景图s -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../../assets/images/banner1.png" alt />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../../assets/images/banner1.png" alt />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../../assets/images/banner2.png" alt />
      </van-swipe-item>
    </van-swipe>
    <!-- 头部背景图e -->
    <!-- 输入部分s -->
    <div class="index_input">
      <div class="index_input_text">请输入标签上的20位防伪码：</div>
      <van-field v-model="text" class="index_input_input2" />
      <div class="index_input_btn" @click="handleCha()">查询</div>

      <div class="index_input_text index_input_t_img">
        <img src="http://hh.app315.net/images/tel.png" alt class="index_input_text_img" />
        <span>免费咨询电话：4001-111-111</span>
      </div>
    </div>
    <!-- 输入部分e -->

    <!-- 底部四图s -->
    <div class="mt_10">
      <van-row>
        <van-col span="6">
          <div class="dis_y_center index_botton_box" @click="handleJump(0)">
            <img src="../../assets/images/nav_bottom_logo1.png" alt class="index_botton_img" />
            <div class="index_botton_font">木伯乐官网</div>
          </div>
        </van-col>
        <van-col span="6">
          <div class="dis_y_center index_botton_box" @click="handleJump(1)">
            <img src="../../assets/images/nav_bottom_logo2.png" alt class="index_botton_img" />
            <div class="index_botton_font">公司简介</div>
          </div>
        </van-col>
        <van-col span="6">
          <div class="dis_y_center index_botton_box" @click="handleJump(2)">
            <img src="../../assets/images/nav_bottom_logo3.png" alt class="index_botton_img" />
            <div class="index_botton_font">微信关注</div>
          </div>
        </van-col>
        <van-col span="6">
          <div class="dis_y_center index_botton_box" @click="handleJump(3)">
            <img src="../../assets/images/nav_bottom_logo4.png" alt class="index_botton_img" />
            <div class="index_botton_font">公司网站</div>
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 底部四图e -->

    <!-- 底部介绍 -->
    <div class="index_f">
      <p class="f-bottom2 visible-xs f_b">
        <a
          class="a"
          href="http://beian.miit.gov.cn"
        >Copyright &copy; 2018-2020 木伯乐全屋定制 版权所有 赣ICP备19007009-3号</a>
      </p>
    </div>
    <!-- 底部介绍 -->
  </div>
</template>

<script>
import { getQueryValue, getAttestation } from "../../utils";
import request from "../../request";
import axios from "axios";
import {
  Tag,
  Col,
  Row,
  Icon,
  Field,
  Cell,
  CellGroup,
  Swipe,
  SwipeItem,
  GoodsAction,
  GoodsActionBigBtn,
  Toast,
  GoodsActionMiniBtn
} from "vant";

export default {
  components: {
    [Tag.name]: Tag,
    [Toast.name]: Toast,
    [Row.name]: Row,
    [Field.name]: Field,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionBigBtn.name]: GoodsActionBigBtn,
    [GoodsActionMiniBtn.name]: GoodsActionMiniBtn
  },

  data() {
    return {
      text: ""
    };
  },
  created() {
    let status = getQueryValue("status");
    if (status == 1) {
      this.getCode();
    } else {
      this.text = getQueryValue("code") == null ? " " : getQueryValue("code");
    }
  },
  methods: {
    handleJump(val) {
      let url = "";
      switch (val) {
        case 0:
          url =
            "http://www.mubole.top/#/chanpinzhongxin";
          break;
        case 1:
          url = "http://www.woodbole.com";
          break;
        case 2:
          url = "../wxAttention";
          break;
        case 3:
          url = "http://www.mubole.top";
          break;
      }
      if (val != 2) {
        window.location.href = url;
        return false;
      }
      this.$router.push({ path: url });
    },
    handleCha() {
      if (this.text === " ") {
        Toast.fail("请输入防伪码");
        return false;
      }
      this.getQuery();
    },
    getQuery() {
      let _this = this;
      request.ajaxGet(
        "/api/queryByCode",
        { code: _this.text, key: getAttestation() },
        function(response) {
          if (response.data.status == 200) {
            _this.$router.push({
              path: "../inquire",
              query: {
                code: response.data.code,
                currDate: response.data.currDate
              }
            });
          }
          if (response.data.status != 200) {
            Toast(response.data.message);
          }
        }
      );
    },
    getCode() {
      let _this = this;
      request.ajaxGet("/api/getCode", { key: getAttestation() }, function(
        response
      ) {
        console.log(response);
        if (response.data.status == 200) {
          _this.text = response.data.code;
        }
        if (response.data.status != 200) {
          Toast(response.data.message);
        }
      });
    }
  }
};
</script>

<style lang="less">
@import "../../base.css";
.my-swipe .van-swipe-item img {
  height: 150px;
  width: 100%;
  background-color: #eee;
  overflow: hidden;
}

.index {
  &_f {
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
    color: #999;
  }
  &_botton_box {
    padding: 18px 0;
    border-left: 1px solid #e2e2e2;
    border-top: 1px solid #e2e2e2;
    border-bottom: 1px solid #e2e2e2;
  }
  &_botton_font {
    color: #00b2ac;
    margin-top: 14px;
    font-size: 13px;
  }
  &_botton_img {
    width: 30px;
    height: 30px;
  }
  &_input {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
    &_t_img {
      display: flex;
      align-items: center;
      margin-top: 30px;
    }
    &_text {
      color: #00b2ac;
      margin-bottom: 5px;
      &_img {
        height: 40px;
        width: 40px;
        margin-right: 10px;
      }
    }
    &_input2 {
      width: 248px;
      border-radius: 6px;
      padding: 4px 6px;
      line-height: 36px;
      font-size: 16px;
      color: #000;
      background: #edebed;
    }
    &_btn {
      margin-top: 20px;
      width: 100px;
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      color: #ffffff;
      display: block;
      border-radius: 6px;
      text-align: center;
      text-decoration: none;
      outline: none;
      background-color: #029e9a;
    }
  }
  &_title {
    width: 100%;
    height: 68px;
    overflow: hidden;
    &_img {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      background-color: #fff;
      background-size: 159px 54px;
      background-position: center;
      background-repeat: no-repeat;
      background-image: url(../../assets/images/logo.png);
    }
  }
  &_tab {
    width: 100%;
    box-sizing: border-box;
    bottom: 1px solid red;
    margin: 0 auto;
    background-color: #01b2ac;
    padding: 10px 20px;
    overflow: hidden;
    &_box {
      padding: 10px 0;
      background: #eee;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      &_btn {
        width: 296px;
        text-align: center;
        border: 1px solid #fff;
        border-radius: 10px;
        padding: 5px 0;
        background: #d3d3d3;
        color: #005e3d;
      }
      &_btnActive {
        color: #fff;
        background: #005e3d;
      }
    }
  }
}
</style>
